<template>
  <div class="mod-prod-sku-table">
    <el-form-item>
      <el-table :data="modelValue" border style="width: 100%; margin-top: 20px">
        <el-table-column
          v-for="(leftTitle, index) in tableLeftTitles"
          :key="index"
          :label="leftTitle"
        >
          <template #default="scope">
            {{ scope.row.properties.split(";")[index].split(":")[1] }}
          </template>
        </el-table-column>

<!--        <el-table-column-->
<!--          prop="pic"-->
<!--          label="供应商+SKU"-->
<!--          width="180"-->
<!--        >-->
<!--          <template #default="scope">-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column
          prop="supplierId"
          label="供应商名"  width="150" >
          <template #default="scope" >
            <el-select v-model="scope.row.supplierId" placeholder="请选择"  @change="handleSupplierIdSelectChange(scope.row)">
              <el-option
                v-for="item in props.supplieroptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>


        <el-table-column
          prop="supplierSkuId"
          label="供应商SKU名"  width="300">
          <template #default="scope">
<!--            <el-select v-if="!s_flag" v-model="scope.row.supplierSkuId" placeholder="请选择" @click.native="changesupplier(scope.row)" >-->
<!--              <el-option-->
<!--                v-for="item in props.supplierSKUoptions"-->
<!--                :key="item.id"-->
<!--                :label="item.sku"-->
<!--                :value="item.id"-->
<!--              >-->
<!--              </el-option>-->
<!--            </el-select>-->
            <el-select  v-model="scope.row.supplierSkuId" placeholder="请选择"  >
              <el-option
                v-for="item in supplierSKUoptions"
                :key="item.id"
                :label="item.sku"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          v-if="tableLeftTitles.length"
          prop="pic"
          label="sku图片"
          width="180"
        >
          <template #default="scope">
            <pic-upload v-model="scope.row.pic" />
          </template>
        </el-table-column>
        <el-table-column
          v-if="tableLeftTitles.length"
          prop="prodName"
          label="商品名称"
          width="250"
        >
          <template #default="scope">
            <el-input
              v-model="scope.row.prodName"
              type="textarea"
              :disabled="!scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column prop="price" label="销售价" width="100">
          <template #default="scope">
            <el-input-number
            @change="scope.row.points = Math.round(scope.row.price * 667)"
              v-model="scope.row.price"
              controls-position="right"
              :precision="2"
              :max="1000000000"
              :min="0.01"
              :disabled="!scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column prop="oriPrice" label="市场价" width="100">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.oriPrice"
              controls-position="right"
              :precision="2"
              :max="1000000000"
              :min="0.01"
              :disabled="!scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column prop="points" label="积分" width="160">
          <template #default="scope">
            <el-input-number disabled v-model="scope.row.points" controls-position="right" :precision="2"/>
          </template>
        </el-table-column>
        <el-table-column prop="stocks" label="库存" width="100">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.stocks"
              :min="0"
              controls-position="right"
              type="number"
              :disabled="!scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="商品重量(kg)" width="210">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.weight"
              :precision="2"
              :min="0"
              controls-position="right"
              :disabled="!scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column prop="volume" label="商品体积(m³)" width="210">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.volume"
              :precision="2"
              :min="0"
              controls-position="right"
              :disabled="!scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              v-if="scope.row.status"
              type="text"
              @click="changeSkuStatus(`${scope.$index}`)"
            >
              禁用
            </el-button>
            <el-button v-else type="text" @click="changeSkuStatus(`${scope.$index}`)">
              启用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
  </div>
</template>

<script setup>
import { scoreProdStore } from "@/stores/prod.js";

const s_flag = ref(false);
const props = defineProps({
  modelValue: {
    default: () => [],
    type: Array,
  },

  supplierSKUoptions:[],
  supplieroptions:[],
  prodName: {
    default: "",
    type: String,
  },
});


const init2 = () => {
  supplierSKUoptions.value =props.supplierSKUoptions;
}
const supplierSKUoptions=ref([]);
const changesupplier= (row) => {
  // console.log(supplierSKUoptions)
  console.log("supplierSKU")
  // console.log(row)
  const params={
    supplierId:row.supplierId,
    isDel:0
  }
  http({
    url: http.adornUrl("/admin/suppliersku/initList"),
    method: "get",
    params: http.adornParams(
      Object.assign(
        {
          current: 1,
          size: 99999,
        },
        params
      )
    ),
  }).then(({ data }) => {

    row.supplierSkuId = null;
    s_flag.value = true;
    supplierSKUoptions.value = data.records;
  });
}


const handleSupplierIdSelectChange = (row) =>{

  row.supplierSkuId = null;
  s_flag.value = true;
  changesupplier(row)

}


const emit = defineEmits(["update:modelValue"]);
const dbSpecs = ref([]); // 数据库中的规格
let initing = false;

const tableLeftTitles = computed(() => {
  const res = [];
  for (let i = 0; i < skuTags.value.length; i++) {
    const skuTag = skuTags.value[i];
    res.push(skuTag.tagName);
  }
  return res;
});
const prod = scoreProdStore();
const skuTags = computed({
  get() {
    return prod.skuTags;
  },
});

watch(
  () => props.prodName,
  () => {
    skuAddProdName();
  }
);

onMounted(() => {
  http({
    url: http.adornUrl("/prod/spec/list"),
    method: "get",
    params: http.adornParams(),
  }).then(({ data }) => {
    dbSpecs.value = data;
  });
});

const init = () => {
  initing = true;
  init2()
};
defineExpose({ init });

const changeSkuStatus = (tagIndex) => {
  // eslint-disable-next-line vue/no-mutating-props
  props.modelValue[tagIndex].status = props.modelValue[tagIndex].status ? 0 : 1;
};
const skuAddProdName = () => {
  if (initing) return;
  const skuList = [];
  for (let i = 0; i < props.modelValue.length; i++) {
    const sku = Object.assign({}, props.modelValue[i]);
    if (!sku.properties) {
      return;
    }
    sku.skuName = "";
    const properties = sku.properties.split(";");
    for (const propertiesKey in properties) {
      sku.skuName += properties[propertiesKey].split(":")[1] + " ";
    }
    sku.prodName = props.prodName + " " + sku.skuName;
    skuList.push(sku);

  }
  emit("update:modelValue", skuList);
};
</script>

<style lang="scss" scoped>
.mod-prod-sku-table {
  :deep(.pic-uploader-component .el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .pic-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }
    .pic {
      width: 120px;
      height: 120px;
      display: block;
    }
  }
  :deep(.pic-uploader-component .el-upload:hover) {
    border-color: #409eff;
  }
}
</style>
